<template>
  <u-popup
    v-model="showModel"
    mode="bottom"
    :closeable="true"
    height="100%"
    border-radius="12"
  >
    <view class="popup-content">
      <view class="title">上传文件</view>
      <view class="content">
        <u-form
          :model="form"
          ref="refForm"
          :label-width="140"
          :error-type="['toast']"
        >
          <u-form-item :required="required" label="版本号" prop="version"
            ><u-input v-model="form.version" placeholder="请输入版本号"
          /></u-form-item>
          <u-form-item :required="required" label="版本日期" prop="versionDate"
            ><u-input v-model="form.versionDate" placeholder="请输入版本日期"
          /></u-form-item>
          <u-form-item :required="true" label="文件" prop="fileList"
            ><updateFileVue
              v-model="form.fileList"
              :onlyShow="onlyShow"
              :limit="1"
              :accept="acceptList"
            ></updateFileVue
          ></u-form-item>
        </u-form>
      </view>
      <view class="btn-group">
        <u-button
          plain
          type="primary"
          shape="circle"
          class="w-40"
          @click="clear()"
          >重置</u-button
        >
        <u-button type="primary" shape="circle" class="w-40" @click="submit()"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
</template>
<script setup lang="ts">
import updateFileVue from '@/components/updateFile.vue';

const emits = defineEmits(['submit']);

const showModel = ref<boolean>(false);
const form = ref<any>({});
const refForm = ref();
const onlyShow = ref(false);

const rules = {
  version: [
    {
      required: true,
      message: '请输入版本号',
      trigger: 'blur,change',
    },
  ],
  versionDate: [
    {
      required: true,
      message: '请输入版本日期',
      trigger: 'blur,change',
    },
  ],
};
const required = ref(false);
const acceptList = ref<string[] | undefined>([]);
const show = (requiredFlag: boolean, accept?: string[]) => {
  clear();
  showModel.value = true;
  required.value = false;
  acceptList.value = accept;
  if (requiredFlag) {
    required.value = requiredFlag;
    refForm.value.setRules(rules);
  }
};
const submit = () => {
  refForm.value.validate((valid: boolean) => {
    if (valid) {
      const checkFileFlag = form.value.fileList && form.value.fileList.length;
      if (checkFileFlag) {
        emits('submit', form.value);
        showModel.value = false;
      } else {
        uni.showToast({
          title: '请选择文件',
          icon: 'none',
          duration: 2000,
        });
      }
    }
  });
};
const clear = () => {
  form.value = {};
  refForm.value.setRules({});
};

defineExpose({
  show,
});
</script>
<style lang="scss">
.popup-content {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .title {
    font-size: 32rpx;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10rpx;
    flex: 0;
    height: 100rpx;
  }
  .content {
    flex: 1;
    max-height: calc(100vh - 222rpx - env(safe-area-inset-bottom));
  }
}
.btn-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 30rpx;
  height: 110rpx;

  .w-40 {
    width: 40%;
  }
}
</style>
